<%inherit file="base.html"/>

<%def name="head()">
<script src="/static/js/bootstrap-datepicker.js"></script>
<script src="/static/js/highcharts.js"></script>
<script src="/static/js/charttheme.js"></script>
<script src="/static/js/exporting.js"></script>
<link rel="stylesheet" href="/static/js/datepicker.css"> 
<script>
//页面初始化

var flow_options = {
    credits : {enabled:false},
    chart: {type: 'areaspline',renderTo: 'flow-chart'},
    title: {text: '流量统计'},
    subtitle: {text: '${"%s 00:00:00 -- %s 23:59:59"%(currdate(),currdate())}'},
    xAxis: {type: 'datetime',tickInterval : 3600*1000},
    yAxis: {title: {text: '使用流量'},
        labels: {format:'{value:.2f}',formatter: function() {return this.value + 'MB';}}            
    },
    tooltip: {shared: true, valueSuffix: 'MB'},
    legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 150,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF'
            },  
    plotOptions: {areaspline: {
        marker: {enabled: false,symbol: 'circle',radius: 2,states: {hover: {enabled: true}}},
        fillOpacity: 0.4
    }},          
    series: [{}]
};
$(document).ready(function (){
    Highcharts.setOptions({global: {useUTC: false}});
    $("#day_code").datepicker();   
});

function doQuery()
{
    $.post("/flow_stat/data", {day_code:'${currdate()}'} , function (ev) {
        if (ev.code == 0) {
            flow_options.series = ev.data;
            var chart = new Highcharts.Chart(flow_options);
        }
    }, "json");
}


</script>
</%def>

<%def name="body()">
<div class="panel panel-default">
    <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> 用户流量统计</div>
    <div class="panel-body">
        <form id="query_form" class="form-horizontal form-well" role="form"  method="post">
            <div class="form-group">
                <label for="node_id" class="col-md-2 control-label">区域</label>
                <div class="col-md-3">
                    <select id="node_id" name="node_id" class="form-control" >
                        <option value=""></option>
                        % for node in node_list:
                          <option value="${node.id}" ${str(node.id)==node_id and "selected" or ""}>${node.node_desc}</option>
                        % endfor
                    </select>
                </div>            
                <label for="day_code" class="col-md-2 control-label">日期</label>
                <div class="col-md-3">
                    <input type="text" id="day_code" name="day_code" class="form-control" value="${day_code}">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-5 col-md-7">
                     <button type="button" class="btn btn-primary" onclick="doQuery();">查询</button>
                </div>
            </div>
        </form>

        <div class="container center"  id="flow-chart" >
        </div>
    </div>
</div>


</%def>